<template>
  <view class="container">
    <view class="title">{{ $t('address.title') }}</view>
    <view class="input-box">
      <input 
        type="text" 
        :placeholder="$t('address.placeholder')" 
        v-model="walletAddress"
        @input="validateAddress"
      >
    </view>
    
    <view 
      class="save-btn" 
      :class="{ disabled: !isValid }"
      @click="saveAndNavigate" 
      :disabled="!isValid"
	  >
      {{ $t('address.saveButton') }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      walletAddress: '',
    }
  },
  computed: {
    // 计算属性：实时判断地址是否有效（非空且有内容）
    isValid() {
      return this.walletAddress.trim().length > 0;
    }
  },
  methods: {
    // 验证地址有效性
    validateAddress() {
      // 输入变化时自动更新 isValid 状态
    },
    
    // 保存地址并跳转到钱包页面
    saveAndNavigate() {
      if (!this.isValid) return;
      
      // 模拟保存地址的异步操作
      uni.showLoading({ title: this.$t('address.saving') });
      
      setTimeout(() => {
        // 保存成功后跳转
        uni.hideLoading();
        uni.navigateTo({
          url: '/pages/my/wallet/wallet'
        });
      }, 800);
    }
  }
}
</script>


<style lang="less" scoped>
	.container {
		padding: 74rpx 42rpx 20rpx;
		min-height: 93.4vh;
		background: #F2F2F2;

		.title {
			margin-bottom: 24rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.input-box {
			height: 106rpx;
			background-color: #FBFCFF;
			border-radius: 16rpx;
			overflow: hidden;

			input {
				width: 100%;
				height: 100%;
				line-height: 106rpx;
				padding: 0 32rpx;
				font-size: 28rpx;
			}
		}

		.save-btn {
			margin: 60rpx auto 0;
			width: 622rpx;
			height: 128rpx;
			line-height: 128rpx;
			background-color: #52a5f3;
			font-size: 40rpx;
			color: #fff;
			font-weight: bold;
			text-align: center;
			border-radius: 64rpx;
			position: absolute;
			bottom: 20%;
			left: 64rpx;
		}


		.error-message {
			color: #ff4949;
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.save-btn {
			&.disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}

	}
</style>